<template>
	<div class="my-side-tab">
		<ul class="tab-list">
			<li
				v-for="item of tabList"
				:key="item.id"
				v-show="item.isShow"
				@click="toggleTab(item.id)"
			>
				<router-link
					:to="item.path"
					:class="{
						'is-active': item.isActive,
					}"
				>
					<i class="iconfont" :class="item.iconClass"></i>
					{{ item.pathName }}
				</router-link>
			</li>
		</ul>
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 选项卡列表
			tabList: [
				{
					id: 1,
					path: "/collection",
					pathName: "我的收藏",
					isShow: false,
					isActive: false,
					iconClass: {
						"icon-xihuan1": true,
						collection: true,
					},
				},
				{
					id: 2,
					path: "/myRadioStation",
					pathName: "我的电台",
					isShow: true,
					isActive: true,
					iconClass: {
						"icon-diantai1": true,
						"my-radio-station": true,
					},
				},
				{
					id: 3,
					path: "/download",
					pathName: "本地与下载",
					isShow: true,
					isActive: false,
					iconClass: {
						"icon-diannao3": true,
						download: true,
					},
				},
				{
					id: 4,
					path: "/cloudDisk",
					pathName: "音乐云盘",
					isShow: false,
					isActive: false,
					iconClass: {
						"icon-yunpan": true,
						"cloud-disk": true,
					},
				},
				{
					id: 5,
					path: "/recently",
					pathName: "最近播放",
					isShow: true,
					isActive: false,
					iconClass: {
						"icon-zuijin": true,
						recently: true,
					},
				},
				{
					id: 6,
					path: "/default",
					pathName: "默认列表",
					isShow: true,
					isActive: false,
					iconClass: {
						"icon-bofangliebiao1": true,
						default: true,
					},
				},
			],
		};
	},
	methods: {
		// 切换选项卡 颜色之类的发生变化
		toggleTab(id) {
			this.tabList.forEach((item) => {
				if (item.id == id) {
					item.isActive = true;
				} else {
					item.isActive = false;
				}
			});
		},
	},
	mounted() {
		// 页面刷新 监视路由地址的变化,根据不同的路由组件地址选择对应的侧边选项卡
		this.tabList.forEach((item) => {
			if (this.$route.path == item.path) {
				item.isActive = true;
			} else {
				item.isActive = false;
			}
		});
	},
	watch: {
		// 监视路由地址的变化,根据不同的路由组件地址选择对应的侧边选项卡
		$route() {
			console.log(this.$route.path);
			this.tabList.forEach((item) => {
				if (this.$route.path == item.path) {
					item.isActive = true;
				} else {
					item.isActive = false;
				}
			});
		},
	},
};
</script>
<style lang="scss">
.my-side-tab {
	position: fixed;
	top: 80px;
	left: 0;
	width: 210px;
	height: calc(100vh - 156px);
	padding: 22px 20px;
	background-image: linear-gradient(#fff, #fafafa);
	box-sizing: border-box;
	z-index: 98;
	.tab-list {
		width: 100%;
		li {
			overflow: hidden;
			width: 100%;
			height: 38px;
			margin-bottom: 2px;
			border-radius: 3px;
			a {
				display: flex;
				align-items: center;
				width: 100%;
				height: 100%;
				font-size: 14px;
				color: #333;
				i {
					font-size: 16px;
					margin: 0 10px;
					&.my-radio-station {
						font-size: 20px;
						margin: 0 8px;
					}
					&.download {
						font-size: 15px;
					}
					&.cloud-disk {
						margin: 0 5px;
					}
					&.recently {
						font-size: 15px;
					}
					&.default {
						font-size: 30px;
						margin: 0 3px;
					}
				}
				&:hover {
					background-color: #f4f4f4;
				}
			}
			.is-active {
				cursor: default;
				color: #5192fe;
				background-color: #ecf2fd;
				&:hover {
					background-color: #ecf2fd;
				}
			}
		}
	}
}
</style>
